<template>
  <div class="container">
    <el-card>
      <el-row>
        <el-col class="titleButton">
<!--          新增试题的按钮-->
          <div></div>
          <el-button type="success" size="small" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button>
        </el-col>
      </el-row>
<!--      搜索栏-->
      <el-form ref="form" :model="query" label-width="80px">
        <el-row>
          <el-col :span="6">
<!--            学科-->
            <el-form-item label="学科">
              <el-select style="width:100%;" v-model="query.subjectID" placeholder="请选择" @change="onSubjectChange" clearable>
                <el-option v-for="(item, index) in subjects" :key="index" :label="item.subjectName" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
<!--            目录-->
            <el-form-item label="目录">
              <el-select style="width:100%;" v-model="query.catalogID" placeholder="请选择" @change="onDirectoryChange" clearable>
                <el-option v-for="(item, index) in directory" :key="index" :label="item.directoryName" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
<!--            标签-->
            <el-form-item label="标签">
              <el-select style="width:100%;" v-model="query.tags" placeholder="请选择" @change="onDirectoryChange" clearable>
                <el-option v-for="(item, index) in tagList" :key="index" :label="item.tagName" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
<!--            关键字-->
            <el-form-item label="关键字" clearable>
              <el-input v-model="query.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
<!--            试题类型-->
            <el-form-item label="试题类型">
              <el-select style="width:100%;" v-model="query.questionType" placeholder="请选择" @change="onDirectoryChange" clearable>
                <el-option v-for="(v, k, i) in questionType" :key="i" :label="v" :value="k"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
<!--            难度-->
            <el-form-item label="难度">
              <el-select style="width:100%;" v-model="query.difficulty" placeholder="请选择" @change="onDirectoryChange" clearable>
                <el-option v-for="(v, k, i) in difficulty" :key="i" :label="v" :value="k"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
<!--            方向-->
            <el-form-item label="方向">
              <el-select style="width:100%;" v-model="query.direction" placeholder="请选择" @change="onDirectoryChange" clearable>
                <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
<!--            录入人-->
            <el-form-item label="录入人">
              <el-select style="width:100%;" v-model="query.creatorID" placeholder="请选择" @change="onDirectoryChange" clearable>
                <el-option v-for="(item, index) in userList" :key="index" :label="item.username" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
<!--            题目备注-->
            <el-form-item label="题目备注" clearable>
              <el-input v-model="query.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
<!--            企业简称-->
            <el-form-item label="企业简称" clearable>
              <el-input v-model="query.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
<!--            城市-->
            <el-form-item class="city-box" label="城市">
              <el-select class="cityOne" v-model="query.province" placeholder="请选择" @change="onProvinceChange" clearable>
                <el-option v-for="(item, index) in province" :key="index" :label="item" :value="item"> </el-option>
              </el-select>
              <el-select class="cityTwo" v-model="query.city" placeholder="请选择" @change="onDirectoryChange" clearable>
                <el-option v-for="(item, index) in citys" :key="index" :label="item" :value="item"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right;">
            <el-button size="small" @click="clearAll">清除</el-button>
            <el-button size="small" type="primary" @click="questionsList"> 搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
<!--      显示数据有多少条-->
      <el-alert :title="'数据一共' + counts + '条'" type="info" show-icon :closable="false"> </el-alert>
      <template>
<!--        表格部分-->
        <el-table :data="questionListData" style="width: 100%;margin-top: 10px">
          <el-table-column prop="number" label="试题编号" width="180"> </el-table-column>
          <el-table-column prop="subject" label="学科" width="180"> </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column prop="address" label="题型">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.questionType === '1'">单选</span>
                <span v-else-if="scope.row.questionType === '2'">多选</span>
                <span v-else>简答</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="题干">
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间">
            <template slot-scope="scope">
              {{ scope.row.addDate }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="难度">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.difficulty === '1'">简单</span>
                <span v-else-if="scope.row.difficulty === '2'">一般</span>
                <span v-else>困难</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <div>
                <el-button @click="handleDetail(scope.row)" plain size="small" type="primary" icon="el-icon-view" circle></el-button>
                <el-button @click="handleEdit(scope.row)" plain size="small" type="success" icon="el-icon-edit" circle></el-button>
                <el-button @click="removeQuestion(scope.row)" plain size="small" type="danger" icon="el-icon-delete" circle></el-button>
                <el-button @click="choiceAdd(scope.row)" plain size="small" type="warning" icon="el-icon-star-off" circle></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
<!--      分页-->
      <el-pagination
        style="text-align: right; margin-top: 20px; margin-bottom: 15px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="query.pagesize"
        layout="prev, pager, next, sizes, jumper"
        background
        :total="counts"
      >
      </el-pagination>
<!--      点击详情按钮查看详情-->
      <questions-preview :dialogVisible="dialogVisible" @close="dialogVisible = false" :questionItem="questionItem"></questions-preview>
    </el-card>
  </div>
</template>

<script>
// 引入详情的组件
import questionsPreview from '../components/questions-preview'
// 引入基础题库列表 基础题库详情 精选题库加入取消 基础题库删除 接口
import { list as questionsList, detail as questionsDetail, choice as questionsChoiceAdd, remove as questionRemove } from '@/api/hmmm/questions'
// 引入城市和区域/县
import { provinces, citys } from '@/api/hmmm/citys'
// 引入标签列表接口
import { tagsList } from '@/api/hmmm/tags'
// 获取录入人list接口
import { list } from '@/api/base/users.js'
// 引入学科列表接口
import { subjectsList } from '@/api/hmmm/subjects'
// 引入目录列表接口
import { list as directorysList } from '@/api/hmmm/directorys'
export default {
  data () {
    return {
      questionItem: {},
      dialogVisible: false,
      // 题目数总计
      counts: 0,
      // 题目列表list
      questionListData: [],
      // 区域列表
      citys: [],
      // 获取所有城市
      province: provinces(),
      // 标签列表
      tagList: [],
      // 录入人列表
      userList: [],
      // 搜索方向list
      direction: ['o2o', '外包服务', '企业服务', '互联网金融', '企业咨询', '互联网', '电子商务', '其他'],
      // 搜索试题类型
      difficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 搜索难度选择
      questionType: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      // 目录列表
      directory: [],
      // 学科列表
      subjects: [],
      // 查询条件
      query: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      }
    }
  },
  created () {
    // 查询题库
    this.questionsList()
    // 获取录入人
    this.getCreator()
    // 获取学科列表
    this.getQuestionsList()
    // 获取标签列表
    this.getTagList()
  },
  components: {
    // 引入查看详情的组件
    questionsPreview
  },
  methods: {
    // 查询题库
    questionsList () {
      questionsList(this.query).then(res => {
        console.log(res.data)
        this.questionListData = []
        this.questionListData = res.data.items
        this.$set(this.questionListData)
        this.counts = res.data.counts
      })
    },
    // 获取学科列表
    getQuestionsList () {
      console.log(123)
      subjectsList({ page: 1, pagesize: 100 }).then(res => {
        this.subjects = res.data.items
      })
    },
    // 选择学科以后查询相对应的目录
    onSubjectChange (val) {
      this.query.tags = null
      this.query.catalogID = null
      directorysList({ page: 1, pagesize: 100 }).then(res => {
        console.log(res)
        this.directory = res.data.items
      })
      this.tagList = []
    },
    // 获取标签列表
    getTagList () {
      tagsList().then(res => {
        this.tagList = res.data.items
      })
    },
    // 编辑按钮进行跳转
    handleEdit (row) {
      this.$router.push({
        path: 'new',
        query: {
          id: row.id
        }
      })
    },
    // 查看详情
    handleDetail (item) {
      this.dialogVisible = true
      questionsDetail({ id: item.id }).then(res => {
        res.data.questionType = item.questionType
        res.data.subject = item.subject
        this.questionItem = res.data
      })
    },
    // 清除搜索条件
    clearAll () {
      for (const key in this.query) {
        this.query[key] = null
      }
      this.query.page = 1
      this.query.pagesize = 5
      // 清空标签列表
      this.tagList = []
      // 清空目录列表
      this.directory = []
      // 重新查询列表
      this.questionsList()
    },
    // 分页下一页
    handleSizeChange (val) {
      this.query.pagesize = val
      this.questionsList()
    },
    // 分页数量发生改变
    handleCurrentChange (val) {
      this.query.page = val
      this.questionsList()
    },
    // 加入精选
    choiceAdd (item) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        // 点击确定加入精选触发请求
        this.questionsChoiceAdd(item.id)
      }).catch(err => err)
    },
    // 加入精选触发
    questionsChoiceAdd (id) {
      questionsChoiceAdd({
        id: id,
        choiceState: 1
      }).then(res => {
        if (res.data.status === 200) {
          this.$message.success('加入精选成功')
        }
        this.questionsList()
      })
    },
    // 删除题目
    removeQuestion (item) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        questionRemove(item).then(res => {
          if (res.data.status === 200) {
            return this.$message.success('删除成功')
          }
        })
      }).catch(err => err)
    },
    // 当选择省份 市级
    onProvinceChange (val) {
      this.query.city = ''
      this.citys = citys(val)
    },
    // 获取录入人
    getCreator () {
      list({ page: 1, pagesize: 100, keyword: '' }).then(res => {
        this.userList = res.data.list
      })
    },
    // 录选择框
    onDirectoryChange (val) {
      this.getTagList()
    }
  }
}
</script>

<style scoped lang="scss">
.el-card {
  margin: 10px;
  .titleButton {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    div {
      font-size: 12px;
      color: pink;
    }
  }
  .cityOne {
    width: 45%;
    margin-right: 5%;
  }
  .cityTwo {
    width: 50%;
  }
  .el-input__inner {
    width: 100%;
  }
}
</style>
